<template>
    <div class="trademark-container">
        <!-- 添加按钮 -->
        <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px; width: 120px;" @click="addTradeMark">
            添加
        </el-button>

        <!-- 表格区域 -->
        <el-table :data="list" border stripe width="100%">
            <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
            <el-table-column label="品牌名称" prop="tmName" width="width" align="center"></el-table-column>
            <!-- 通过作用域插槽遍历图片和按钮元素 
                写法：
                    <template slot-scope="{row,$index}">
                        {{row,$index}}
                    </template>
                row: 数组里的每个单独元素
                $index: 索引
            -->
            <el-table-column label="品牌LOGO" prop="prop" width="width" align="center">
                <template slot-scope="{row,$index}">
                    <img :src="row.logoUrl" alt="logo" style="width: 80px;height: 60px;">
                </template>
            </el-table-column>

            <el-table-column label="操作" prop="prop" width="width" align="center">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="updataTradeMark(row)">修改
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTradeMark(row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <!-- 
            current-page: 当前是第几页
            total: 一共有多少条数据需要展示
            page-size: 每一页需要展示多少条数据
            page-sizes: 设置每一页展示多少条数据
            pager-count: 连续的页码数
            layout: 设置分页器的布局| -> : 代表将箭头后的元素移动至页面最右端
        -->
        <el-pagination background style="margin-top: 30px; text-align: center;" :current-page="page" :total="total"
            :page-size="limit" :page-sizes="[3,5,7]" :pager-count="7" layout="prev,pager,next,jumper,->,sizes,total"
            @current-change="handleCurrentChange" @size-change="handleSizeChange" @prev-click="handlePrevClick"
            @next-click="handleNextClick">
        </el-pagination>

        <!-- 对话框  -->
        <el-dialog :visible.sync="dialogFormVisible">
            <!-- :title="tmForm.id?'修改品牌':'添加品牌'" -->
            <template #title>
                <span class="dialog-title" v-if="!tmForm.id">添加品牌</span>
                <span class="dialog-title" v-else>修改品牌</span>
            </template>
            <el-form style="width: 90%;" :model="tmForm" :rules="rules" ref="ruleForm">
                <!-- 品牌名称区域 -->
                <el-form-item label-width="100px" label="品牌名称" prop="tmName">
                    <el-input v-model="tmForm.tmName" placeholder="请输入品牌名称" autocomplete="off" />
                </el-form-item>
                <!-- 上传图片区域 -->
                <el-form-item label-width="100px" label="品牌LOGO" prop="logoUrl">
                    <!-- 
                        action : 图片上传到的服务器接口 
                        on-success : 成功上传图片会执行一次
                        before-upload ： 图片上传之前会执行一次，通常用来判断上传的图片符不符合要求
                    -->
                    <el-upload class="avatar-uploader" action="/dev-api/admin/product/admin/product/fileUpload"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" style="width: 100px; margin-right: 30px;"> 取消
                    </el-button>
                    <el-button type="primary" @click="addTmOrUpdataTm()" style="width: 100px;"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: "Trademark",
        mounted() {
            //组件挂载完毕发送获取数据
            this.getTradeMarkList()
        },
        data() {
            //表单验证自定义校验规则
            var validateTmName = (rule, value, callback) => {
                if (value.length < 2 || value.length > 10) {
                    callback(new Error('长度在 2 到 10 个字符'))
                } else {
                    callback()
                }

            };
            return {
                page: 1, // 当前的页码
                limit: 3, // 当前页数展示多少条数据
                total: 0, // 总共多少条数据
                list: [], //数据列表
                dialogFormVisible: false, // 是否显示对话框
                tmForm: { //表单数据
                    tmName: "", // 品牌名称
                    logoUrl: "" // 上传的图片
                },
                rules: { //表单验证规则
                    tmName: [
                        { required: true, message: '请输入品牌名称', trigger: 'blur' },
                        // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
                        { validator: validateTmName, trigger: 'change' }
                    ],
                    logoUrl: [
                        { required: true, message: '请选择品牌图片' }
                    ],
                }
            }
        },
        methods: {
            // 获取品牌列表数据
            async getTradeMarkList() {
                //结构参数
                const { page, limit } = this
                const result = await this.$api.trademark.reqTradeMarkList(page, limit)
                if (result.code === 200) { // 请求成功，将将本地数据替换成服务器数据
                    this.total = result.data.total
                    this.list = result.data.records
                } else { // 请求失败
                    return Promise.reject(new Error('faile'))
                }
            },

            // 点击不同分页发送请求获取数据
            handleCurrentChange(page) { // page: 当前点击的页码
                this.page = page // 将data中的当前页面替换成当前点击的页码
                this.getTradeMarkList()
            },

            // 切换页面展示多少条数据时发送请求
            handleSizeChange(limit) { // limit: 当前页面展示多少条数据
                this.limit = limit
                this.getTradeMarkList()
            },

            // 点击上一页发送请求获取数据
            handlePrevClick(page) { // page: 当前点击的页码
                this.page = page // 将data中的当前页面替换成当前点击的页码
                this.getTradeMarkList()
            },

            // 点击上一页发送请求获取数据
            handleNextClick(page) { // page: 当前点击的页码
                this.page = page // 将data中的当前页面替换成当前点击的页码
                this.getTradeMarkList()
            },

            // 点击添加品牌按钮
            addTradeMark() {
                this.dialogFormVisible = true
                this.tmForm = { tmName: "", logoUrl: "" } //清空对话框中的数据
            },

            // 点击修改品牌按钮
            updataTradeMark(row) {
                this.dialogFormVisible = true // 显示对话框
                // row的数据为服务器返回的数据，不能直接将其赋值给dom元素，否则没有点击确认也会直接将该数据修改
                // 通过 {...row} 将数据浅拷贝一份再赋值给dom
                this.tmForm = { ...row } // 将需要修改的品牌展示在对话框中
            },

            // 图片上传成功后
            handleAvatarSuccess(res, file) {
                this.tmForm.logoUrl = res.data;
            },
            // 图片上传之前 / 判断上传的图片格式大小是否符合要求
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            // 点击对话框的确认按钮 | 增加或修改品牌
            addTmOrUpdataTm() {
                // 当表单验证通过是，再进行业务逻辑
                this.$refs.ruleForm.validate(async (success) => {
                    if (success) { //验证通过
                        this.dialogFormVisible = false // 隐藏对话框
                        // 携带数据向服务器发送请求
                        const result = await this.$api.trademark.reqAddTmOrUpdataTm(this.tmForm)
                        if (result.code === 200) {
                            this.$message({ //如果携带的数据中有 id属性 则代表是 修改数据 没有则为 添加数据
                                message: this.tmForm.id ? '修改品牌成功！' : '添加品牌成功！',
                                type: 'success'
                            });

                            this.getTradeMarkList() // 重新获取品牌列表数据

                            if (!this.tmForm.id) { //添加品牌时跳转到最后一页（数据默认添加在最后一页）
                                // 总数据除于每页展示数据 再向上取整 则为最后一页的页码
                                const pager = Math.ceil(this.total / this.limit)
                                this.handleCurrentChange(pager)
                            }
                        } else {
                            this.$message({
                                message: this.tmForm.id ? '修改品牌失败！' : '添加品牌失败！',
                                type: 'error'
                            });
                        }
                    } else { // 验证失败
                        return false;
                    }
                });
            },

            // 删除品牌
            deleteTradeMark(row) {
                this.$confirm(`您确定要删除${row.tmName}吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => { // 点击确认按钮
                    // 业务逻辑 | 删除并再次获取品牌列表
                    const result = await this.$api.trademark.reqDeleteTradeMark(row.id)
                    if (result.code === 200) { // 请求成功
                        this.getTradeMarkList() // 重新获取品牌列表数据
                        this.$message({ //删除完成重新获取品牌数据后弹框显示
                            type: 'success',
                            message: '删除成功!',
                            center: true
                        });
                    }
                }).catch(() => { // 点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                        center: true
                    });
                });
            },
        },
    }
</script>
<style>
    /* 对话框标题样式 */
    .dialog-title {
        font-size: 24px;
        color: #333;
        font-weight: 550;
    }

    /* 上传图片的样式 */
    .avatar-uploader .el-upload {
        background-color: #f5f5f5;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: background-color 0.1s linear;
    }

    .avatar-uploader .el-upload:hover {
        background-color: #eee;
    }

    .avatar-uploader-icon {
        font-size: 80px;
        color: #bebebe;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .el-upload__tip {
        font-size: 14px;
        color: #999;
    }
</style>

<style scoped>
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
</style>